<!--左边的控制台-主要有当前会话，联系人，其他功能三个模块-->
<script setup lang="ts">
import UserInfo from "@/app/connect/views/leftControl/modules/userInfo.vue";
import Func from './modules/func.vue'
import Session from './modules/session.vue'
import Contacts from './modules/contacts.vue'
import {ref} from "vue";

let currentTab = ref<string>('Session')
const controlChange = (key: string) => {
  currentTab.value = key
}
</script>
<template>
  <div class="left-control">
    <UserInfo @change="controlChange"></UserInfo>
    <div class="function-board">
      <Session v-show="currentTab ==='Session'"></Session>
      <Func v-show="currentTab ==='Func'"></Func>
      <Contacts v-show="currentTab ==='Contacts'"></Contacts>
    </div>
  </div>
</template>
<style lang="less" scoped>
.left-control {
  border-right: 1px solid #F0F1F3;
  height: 100%;

  .function-board {
    border-top: 1px solid #D9D9D9;
    height: calc(100% - 70px - 60px);
    width: 240px;
  }
}

</style>
